<template>
  <div class="mine-container">
    <!-- 1.我的页面-头部区域 -->
    <div class="mybox">
      <!-- 1.1 -->
      <div class="mytitle">
        <div class="letf">
          <h2>{{ userInfo.nickname }}</h2>
          <p>{{ userInfo.intro ? userInfo.intro : "这个家伙还没有介绍" }}</p>
        </div>
        <div class="right">
          <van-image
            class="myimg"
            fit="cover"
            round
            :src="'http://localhost:1337' + userInfo.avatar"
            @click="$router.push('/mydata')"
          />
        </div>
      </div>
      <!-- 1.2 -->
      <van-row class="answer" type="flex" justify="center">
        <van-col span="6">
          <p>{{ userInfo.submitNum }}</p>
          <span>累计答题</span>
        </van-col>
        <van-col span="6">
          <p>{{ this.editQuestions }}</p>
          <span>收藏题目</span>
        </van-col>
        <van-col span="6">
          <p>{{ userInfo.errorNum }}</p>
          <span>我的错题</span>
        </van-col>
        <van-col span="6">
          <p>
            {{ GetPercent(userInfo.errorNum, userInfo.submitNum)
            }}<i class="percentum">%</i>
          </p>
          <span>正确率</span>
        </van-col>
      </van-row>
      <!-- 1.3 -->
      <van-cell-group inset class="mystation">
        <van-cell
          icon="manager-o"
          title="我的岗位"
          :value="userInfo.position"
          is-link
          @click="$router.push('/station')"
          center
        />
      </van-cell-group>
    </div>
    <!-- 2.我的页面-身体部位 -->
    <div class="mybody">
      <!-- 2.1面经数据 -->
      <van-cell-group inset class="myGroup">
        <h3 class="mySurfaceData">面经数据</h3>
        <van-row class="myRow" type="flex" justify="center">
          <van-col span="8">
            <p class="myYesterday">
              昨日阅读<em>+{{ userInfo.shareData.read.yesterday }}</em>
            </p>
            <h4>{{ userInfo.shareData.read.total }}</h4>
            <p class="mySum">阅读总数</p>
          </van-col>
          <van-col span="8">
            <p class="myYesterday">
              昨日获赞<em>+{{ userInfo.shareData.star.yesterday }}</em>
            </p>
            <h4>{{ userInfo.shareData.star.total }}</h4>
            <p class="mySum">获赞总数</p>
          </van-col>
          <van-col span="8">
            <p class="myYesterday">
              昨日新增<em>+{{ userInfo.shareData.comment.yesterday }}</em>
            </p>
            <h4>{{ userInfo.shareData.comment.total }}</h4>
            <p class="mySum">评论总数</p>
          </van-col>
        </van-row>
      </van-cell-group>
      <!-- 2.2我的面经分享 -->
      <van-cell-group inset class="myCellgroup">
        <van-cell icon="description" title="我的面经分享" value="21" is-link />
        <van-cell icon="envelop-o" title="我的消息" value="98" is-link />
        <van-cell icon="gem-o" title="收藏的题库" value="32" is-link />
        <van-cell icon="shop-collect-o" title="收藏的企业" value="22" is-link />
        <van-cell icon="qr-invalid" title="我的错题" value="211" is-link />
        <van-cell icon="star-o" title="收藏的面试经验" value="211" is-link />
      </van-cell-group>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "mine",
  methods: {
    //计算错题百分比
    GetPercent(num, total) {
      num = total - num;
      num = parseFloat(num);
      total = parseFloat(total);
      if (isNaN(num) || isNaN(total)) {
        return "-";
      }
      return total <= 0 ? "0" : Math.round((num / total) * 10000) / 100.0;
    },
  },

  computed: {
    editQuestions() {
      return (
        this.userInfo.collectQuestions.length +
        this.userInfo.correctQuestions.length
      );
    },
    ...mapState(["userInfo"]),
  },
};
</script>

<style lang="less" scoped>
// 1.我的页面-头部区域
.mybox {
  width: 100%;
  height: 380px;
  background-color: #ce0031;
  // background-color: #000;

  padding-top: 50px;
  position: relative;
  box-sizing: border-box;
  // 1.1
  .mytitle {
    height: 100px;
    margin-bottom: 56px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .letf {
      height: 100px;
      margin-left: 30px;
      h2 {
        font-size: 42px;
        color: #ffffff;
        margin: 0;
      }
      p {
        font-size: 24px;
        opacity: 0.6;
        color: #ffffff;
        margin: 0;
        margin-top: 12px;
      }
    }
    .right {
      margin-right: 74px;
      width: 100px;
      height: 100px;
      border: 6px solid rgba(255, 255, 255, 0.38);
      border-radius: 50%;
      .myimg {
        width: 100%;
        height: 100%;
        // border: 6px solid rgba(255, 255, 255, 0.38);
        // border-radius: 50%;
      }
    }
  }
  // 1.2
  .answer {
    height: 100px;
    margin-bottom: 52px;
    .van-col.van-col--6 {
      text-align: center;
    }
    p {
      font-size: 42px;
      color: #ffffff;
      font-weight: 400;
      margin: 0;
      i.percentum {
        font-size: 10px;
        font-weight: 300;
      }
    }
    span {
      font-size: 24px;
      color: #ffffff;
      opacity: 0.6;
    }
  }
  // 1.3
  .mystation {
    height: 110px;
    width: 690px;
    line-height: 110px;
    position: absolute;
    bottom: -55px;
    .van-cell.van-cell--clickable {
      height: 110px;
      font-size: 28px;
      .van-cell__title {
        span {
          color: #181a39;
        }
      }
      .van-cell__value {
        span {
          color: #5b5d75;
        }
      }
    }
  }
}
//2.我的页面-身体部位
.mybody {
  box-sizing: border-box;
  background-color: #f7f4f5;
  height: 950px;
  padding-top: 76px;
  // 2.1
  .myGroup {
    height: 285px;
    .mySurfaceData {
      line-height: 40px;
      font-size: 28px;
      margin-left: 30px;
      margin-top: 38px;
    }
    .myRow {
      height: 160px;
      text-align: center;
      P.myYesterday {
        font-size: 20px;
        color: #b4b4bd;
        margin: 0;
        em {
          color: #00b8d4;
          font-style: normal;
        }
      }
      H4 {
        font-size: 42px;
        color: #181a39;
        line-height: 50px;
        margin: 0;
        padding-top: 20px;
        padding-bottom: 10px;
      }
      p.mySum {
        margin: 0;
        font-size: 24px;
        color: #545671;
      }
    }
  }
  // 2.2
  .myCellgroup {
    margin-top: 20px;
    i.van-cell__left-icon {
      margin-right: 20px;
    }
  }
}
</style>